<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2024-11-21 15:07:30
 * @LastEditTime: 2024-11-21 16:05:03
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
	<el-dialog v-model="dialogShow" title="支付" width="600" :before-close="cancel">
		<!-- 二维码显示区域 -->
		<div v-if="qrCodeUrl" class="qr-container text-center">
			<img 
				:src="qrCodeUrl" 
				class="qr-image m-auto"
			>
		</div>
		
		<!-- 错误提示 -->
		<div v-if="error" class="text-red-500 text-sm mt-2">
		{{ error }}
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="finish">完 成</el-button>
				<!-- <el-button @click="cancel">取 消</el-button> -->
			</div>
		</template>
	</el-dialog>
</template>
<script setup>

import { ElMessage } from 'element-plus'
import QRCode from 'qrcode';

const emits = defineEmits(['success']);

const dialogShow = ref(false);

const path = ref();
const qrCodeUrl = ref();
const error = ref();

const generateQrCode = async () => {
  if (!path.value) return;
  
  try {
    error.value = '';
    // 生成二维码
    const qrUrl = await QRCode.toDataURL(path.value, {
      width: 200,
      margin: 1
    });
    qrCodeUrl.value = qrUrl;
  } catch (err) {
    console.error('生成二维码失败:', err);
    error.value = '生成二维码时出错，请重试';
  }
};

const show = async (url) => {
	dialogShow.value = true;
	path.value = url
	generateQrCode()
};
const closeDialog = () => {
	dialogShow.value = false;
	// dialogType.value = undefined;
};

const cancel = () => {
	closeDialog();
};

const finish = () => {
	closeDialog();
	emits('success');
};

const submit = () => {
	// const data = tableData.value.map((o) => ({
	// 	processInstanceId: o.processInstanceId,
	// 	status: o.status,
	// 	reason: o.reason,
	// }));
	// completeBatchTask(data).then((res) => {
	// 	ElMessage.success('提交成功');
	// 	closeDialog();
	// 	emits('success');
	// });
};
defineExpose({
	show,
});
</script>
